<template>
  <view>
    <UserInfo :userId="userId" />
    <uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event, 'showLeft')">
      <uni-section title="發現好友"></uni-section>
      <uni-section title="瀏覽記錄"></uni-section>
      <uni-section title="我的草稿"></uni-section>
    </uni-drawer>
    <uni-card>
      <uni-segmented-control :current="current" activeColor="#e30e33" styleType="text" :values="items"
        @clickItem="onClickItem" />
    </uni-card>
    <view class="content">
      <view v-show="current === 0">
        <NoteDraft />
        <NoteCard :list="list[0].rows" />
      </view>
      <view v-show="current === 1">
        <NoteCard :list="list[1].rows" />
      </view>
      <view v-show="current === 2">
        <NoteCard :list="list[2].rows" />
      </view>
    </view>
    <uni-load-more iconType="circle" :status="status" />
  </view>
</template>
<script>
import NoteDraft from '@/components/NoteCard/draft'
import NoteCard from '@/components/NoteCard'
import UserInfo from '@/components/UserInfo'
import {
  httpUserNote,
  httpUserFavorite,
  httpUserLike
} from '@/utils/api.js'
export default {
  components: { NoteCard, NoteDraft, UserInfo },
  data() {
    return {
      showLeft: false,
      items: ['筆記', '收藏', '贊過'],
      current: 0,
      userId: '',
      user: {
        id: '',
        phone: '',
        name: '',
        avatar: '',
        brief: '',
        fans: 0,
        focus: 0,
        like: 0,
        favorite: 0
      },
      noteList: [],
      favoriteList: [],
      likeList: [],
      list: [
        {
          rows: [],
          page: 1
        },
        {
          rows: [],
          page: 1
        },
        {
          rows: [],
          page: 1
        }
      ],
      size: 6,
      status: 'more',
      draft: {}
    }
  },
  onLoad() {
    this.user = getApp().globalData.user
    if (this.user) {
      this.userId = this.user.id || this.user.userId
      this.getNotes()
    } else {
      uni.reLaunch({
        url: '/pages/user/login'
      })
    }
  },
  // 下拉刷新
  async onPullDownRefresh() {
	this.list[this.current].rows = []
    await this.getNotes(this.current)
    uni.stopPullDownRefresh()
    uni.$emit('refresh')
  },
  methods: {
    // 分段器
    onClickItem(e) {
      this.current = e.currentIndex
      this.getNotes(this.current)
      this.list.forEach(item => {
        // 重置
        item.rows = []
        item.page = 1
      })
    },
    // 获取笔记
    async getNotes(index = 0) {
      let http
      switch (index) {
        case 1:
          http = httpUserFavorite
          break;
        case 2:
          http = httpUserLike
          break;
        default:
          http = httpUserNote
      }
	  
      const { code, data } = await http(this.userId, {
        size: this.size,
        page: this.list[index].page,
      })
      if (code === 200) {
        const notes = data.rows
        if (notes.length === 0) {
          this.status = 'noMore'
          return false
        }
        this.list[index].rows = [...this.list[index].rows, ...notes]
        // this.list[index].page++
        this.status = 'more'
        if (notes.length < this.size) this.status = 'noMore'
      }
    },
    goto(url) {
      uni.navigateTo({
        url
      })
    },
    // 打开窗口
    showDrawer(e) {
      this.$refs[e].open()
    },
    // 关闭窗口
    closeDrawer(e) {
      this.$refs[e].close()
    },
    // 抽屉状态发生变化触发
    change(e, type) {
      // console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
      this[type] = e
    }
  }
};
</script>
<style lang="scss"></style>